<template>

  <div>
    <HeaderView></HeaderView>
    <div class="nav_canvas" @click="shoppingbox">
    <div class="delete_shopping" v-show="isDelete">
        <h1>是否确定删除该商品?</h1>
        <button class="delete_box" @click="deleteshopping()">删除</button>
        <button class="sure_box">确定</button>
    </div>
    <div class="shopping_box" v-show="isShow" @click.stop="shoppingtwo">
        <h2>领券享优惠</h2>
        <p>领取后可用于购物车商品</p>
        <!-- <hr> -->
        <div>暂无任何优惠券可用</div>
    </div>
  <a-row justify="center">
    <a-col :xs="4" :sm="4" :md="6" :lg="8" :xl="20">
        <div class="purchase"><p>共{{count_nav}}件商品</p><span @click.stop.prevent="shoppingone">优惠卷</span></div>
    </a-col>
    <a-col :xs="3" :sm="12" :md="12" :lg="8" :xl="8">
        <div class="information"><p>商品信息</p></div>
    </a-col>
    <a-col :xs="3" :sm="12" :md="12" :lg="8" :xl="5">
    <div class="price"><p>单价</p></div>
    </a-col>
    <a-col :xs="3" :sm="12" :md="12" :lg="8" :xl="4">
    <div class="count_nav"><p class="count">数量</p></div>
    </a-col>
    <a-col :xs="3" :sm="12" :md="12" :lg="8" :xl="3">
    <div class="count_nav"><p class="operate">操作</p></div>
    </a-col>
  </a-row>
    <a-row justify="center" v-for='(item, index) in list' :key="index">
        <a-col :xl="20" :xs="4" :sm="4" :md="6" :lg="8">
        <div class="nav_shopping_list">
            <input type="checkbox" class="nav_shopping_list_duigou">
            <div class="nav_shopping_img"></div>
            <div class="nav_shopping_name">{{item.name}}</div>
            <div class="nav_shopping_price">￥{{item.price}}</div>
            <div class="nav_shopping_count">
            <a-space>
               <div class="minus" @click="countone()"><minus-outlined/><p>限额{{item.count}}个</p></div>
               <div><input type="text" v-model="count_wang" class="nav_count" readonly></div>
                <div class="plus" @click="counttwo(item.count)"><plus-outlined/></div>
            </a-space>
            </div>
            <div class="nav_shpping_layout">
                <div @click="deleteId()">删除商品</div>
                <p>修改商品</p>
            </div>
        </div>
        </a-col>
    </a-row>
    <div class="br_emsp_nav"></div>
    <div class="footer_nav">
        <div class="checkbox_nav_input"><input type="checkbox" class="footer_nav_checkbox"><p>全选</p></div>
        <div class="heji_wang">
            <div class="wang_nav_div">合计：￥{{priceone}}</div>
            <div class="chao_nav_div">优惠：￥{{}}<button>优惠明细</button></div>
        </div>
        <div class="key_nav_wangchao" @click="shoppingthree()">去结算({{}})</div>
    </div>
  </div>
  </div>
</template>
<script>
import HeaderView from '@/components/HeaderView.vue'

import { PlusOutlined, MinusOutlined } from '@ant-design/icons-vue'
export default {
  components: {
    HeaderView, PlusOutlined, MinusOutlined
  },
  data () {
    return {
      count_nav: 2,
      isShow: false,
      count_wang: 1,
      isDelete: false,
      price: '',
      list: [
        { id: 1, name: 'oppo', price: 9777, count: 3 },
        { id: 2, name: 'mi', price: 2222, count: 5 }
      ]
    }
  },
  methods: {
    shoppingthree () {
        this.$router.push('/shoppingone')
    },
    deleteId () {
      this.isDelete = !this.isDelete
    },
    countone () {
      if (this.count_wang <= 1) {
        this.count_wang = 1
      } else {
        this.count_wang--
      }
    },
    counttwo (msg) {
    //   for (let i = 0; i < event; i++) {
        console.log(msg)
        if (this.count_wang >= msg) {
          this.count_wang = msg
        } else {
          this.count_wang++
        // }
      }
    },
    shoppingone () {
      this.isShow = !this.isShow
    },
    shoppingbox () {
      this.isShow = false
    },
    shoppingtwo () {
      this.isShow = true
    }
  }
}
</script>
<style scoped>
.minus p{
    position:absolute;
    display:block;
    width:100px;
    font-size:18px;
    margin:10px;
}
.key_nav_wangchao{
    position: absolute;
    top:40%;
    right:8%;
    background: red;
    width: 150px;
    height: 50px;
    border-radius:25px;
    /* text-align: center;
     */
     line-height: 50px;
    font-size:20px;
    color:#fff;

}
.wang_nav_div{
    margin-bottom:5px;
}
.chao_nav_div button{
    position:absolute;
    top:34px;
    left:136px;
    width:100px;
    border:1px solid rgba(0, 0, 0, 0.5);
    border-radius:15px;
    height:30px;
    background-color: #fff;
}
.heji_wang{
    position:absolute;
    top:50%;
    right:30%;
    transform:translateY(-50%);
    font-size:18px;
    font-weight: 600;
}

.checkbox_nav_input p{
    position: absolute;
    top:50%;
    left:10%;
    font-size:20px;
}
.footer_nav_checkbox{
    position:absolute;
    top:50%;
    left:8.3%;
    zoom:200%;
}
.br_emsp_nav{
    width:100%;
    height:180px;
}
.footer_nav{
    width:100%;
    height:150px;
    position:fixed;
    bottom:0;
    background-color: #fff;
}
.nav_shpping_layout{
    position: absolute;
    top:50%;
    right:6.5%;
    font-size:18px;
    transform: translateY(-50%);
    color:#787878;
    letter-spacing:1px;
}
.plus{
    position: absolute;
    left:10px;
    font-size:22px;
    background-color:#f7f8fa;
    width:34px;
    color: rgb(190, 190, 190);
    border-radius:12px;
}
.minus{
    position: absolute;
    left:-70px;
    font-size:22px;
    color: rgb(190, 190, 190);
    background-color:#f7f8fa;
    width:34px;
    border-radius:12px;
}
.nav_shopping_count{
    position: absolute;
    top:27%;
    right:28%;
}
.nav_shopping_count .nav_count{
    width:18px;
    border:0;
    color:#838383;
    position: absolute;
    left:-22px;
    font-size:20px;
}

.nav_shopping_price{
    position:absolute;
    top:27%;
    left:46%;
    font-size:20px;
}
.nav_shopping_name{
    position:absolute;
    top:25%;
    left:14%;
    font-size:20px;
    color:#343A34;
}
.nav_shopping_img{
    width:200px;
    height:200px;
    background:url('@/assets/images/shouji.png') no-repeat;
    background-size:120px 120px;
    position:absolute;
    top:40%;
    left:5.5%;
    transform:translateY(-19%);
}
.nav_shopping_list{
    height:200px;
    background-color:#fff;
    margin-bottom:20px;
    position: relative;
}
.nav_shopping_list_duigou{
    /* width:28px; */
    zoom:200%;
    border:2px solid rgba(0, 0, 0, 0.5);
    border-radius:6px;
    position:absolute;
    top:50%;
    left:20px;
    transform:translateY(-50%);
}
.delete_shopping{
    width:400px;
    /* height:310px; */
    height:164px;
    background-color: #fff;
    border-radius:40px;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    z-index:30;
    box-shadow:1px 3px 40px rgba(0, 0, 0, 0.1);
}
.delete_shopping h1{
    padding:15px 0 15px;
}
.delete_box,.sure_box{
    border:0;
    background-color: #fff;
    width:170px;
    height: 58px;
    border-radius:30px;
    border:1px solid rgba(0,0,0,0.1);
    font-size:18px;
    font-weight:600;
    margin-right:9px;
}
.delete_box{
    background-color: red;
    color:#fff;
}
.limited{
    position:absolute;
    top:50%;
    left:-110px;
    color:#989696;
    font-size:18px;
}
.updateone{
    position:relative;
    top:35%;
    left:35px;
    transform:translateY(-50%);
    font-size:18px;
    color:#989696;
    cursor:pointer;
}
.updateone p {
    margin-bottom:12px;
    cursor:pointer;
}
.jia,.jian,.input_count{
    position: absolute;
    left:-60px;
    top:40%;
    transform:translateY(-50%);
    font-size:20px;
    color:rgba(0,0,0,0.2);
    background-color: #f7f8fa;
    width:32px;
    border-radius:8px;
}
.input_count{
    position: absolute;
    left:-88px;
    /* right:4px; */
    border:0;
    background-color: rgba(0, 0, 0, 0);
    padding-left:2px;
}
.jian{
    position:absolute;
    left:-134px;
}

.checkbox_name,.checkbox_nav,.checkbox_img,.checkbox_count{
    position: relative;
    height:180px;
    background-color: #fff;
    margin-bottom:20px;
}
.checkbox_nav input{
    position: absolute;
    left:20px;
    top:50%;
    transform: translateY(-50%);
}
.checkbox_img div{
    width:200px;
    height: 180px;
    background:url(@/assets/images/shouji.png) no-repeat 0px 40px;
    background-size:100px 100px;
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    left:-250px;
}
.checkbox_name p{
    position:absolute;
    top:40%;
    left:-510px;
    transform:translateY(-50%);
    font-size:20px;
    /* letter-spacing:1px; */
}
.checkbox_name span{
    position:absolute;
    top:40%;
    left:-68px;
    transform:translateY(-50%);
    font-size:20px;
}
.checkbox{
    zoom:200%;
}
.shopping_box{
    width:570px;
    height:300px;
    background:#fff;
    border-radius:30px;
    z-index:200;
    box-shadow:0 3px 4px 2px rgba(0,0,0,.1);
    position:absolute;
    top:220px;
    right:160px;
    border:1px solid rgba(0, 0, 0, 0.1);
}
.shopping_box h2{
    padding-top:20px;
    font-size:24px;
    font-weight:700;
    letter-spacing:2px;
}
.shopping_box p {
    font-size:18px;
    letter-spacing:1px;
    color:rgb(141, 136, 136);
    font-weight: 500;
    padding-bottom:30px;
    border-bottom:1px solid rgba(0,0,0,.1);
}
.shopping_box div{
    padding:40px;
    font-size:20px;
}
.information{
    height: 80px;
    background-color:#fff;
    position:relative;
}
.price{
    height: 80px;
    background-color:#fff;
    position:relative;
}
.price p {
    line-height:80px;
    color:#343A40;
    position:absolute;
    left:90px;
    font-size:20px;
}
.information p {
    display:inline-block;
    position: absolute;
    left:34px;
    color:#343A40;
    font-size:20px;
    line-height: 80px;
}
.nav_canvas{
    background-color: #fafafa;
}
.grinss{
    background-color: aqua;
}
.purchase{
    background-color: #fff;
    margin:30px 0 20px;
    height:80px;
    position:relative;
}
.purchase p {
    letter-spacing:1px;
    display:inline-block;
    position: absolute;
    left:34px;
    line-height:80px;
    color:#343A40;
    font-size:20px;
}
.purchase span {
   letter-spacing: 1px;
   font-size:20px;
   color:red;
   line-height:80px;
   position:absolute;
   right:40px;
}
.count_nav{
    height:80px;
    background-color: #fff;
    position: relative;
    margin-bottom:20px;
}
.count_nav p {
    line-height: 80px;
    font-size:20px;
    color:#343A34;
}
.count{
    display: inline-block;
    position:absolute;
    left:54px;
}
.operate{
    display: inline-block;
    position:absolute;
    left:50px;
}
</style>
